<template>
  <div class="body">

    <div class="table">
      <el-table :data="tablePage"
                style="width: 100% ;color:#438ACA"
                :header-cell-style="{ background: '#438ACA', color: '#fff' }">
        <el-table-column prop="good_Number"
                         label="商品编号"
                         align="center" />
        <el-table-column prop="good_Name"
                         label="商品名称"
                         align="center" />

        <el-table-column prop="good_KuChun"
                         label="库存"
                         align="center" />
        <el-table-column prop="good_ZhuangTai"
                         label="状态"
                         align="center">

        </el-table-column>

      </el-table>
      <div class="page">
        <div>共<span>{{ pageMax }}</span>页/<span>{{ data.data.length }}</span>条数据</div>
        <el-pagination layout=" prev, pager, next"
                       :page-count="pageMax"
                       :current-page="data.page"
                       background
                       @current-change="clickPage">
        </el-pagination>
        <div>跳至<input class="ent"
                 type="text"
                 v-model="data.page"
                 :change="ent(data.page)">页
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { reactive, computed, ref } from 'vue'
import { useRouter } from 'vue-router'
import axios from 'axios'
import { ElMessage } from 'element-plus'
const data = reactive({
  data: [
    {
      good_Number: 1,
      good_Name: 1,
      good_ZhuangTai: 1,
      good_KuChun: 1,
      good_ZhuangTai: 1,
    },
    {
      good_Number: '測試2',
      good_Name: '測試2',
      good_ZhuangTai: '測試2',
      good_KuChun: '測試2',
      good_ZhuangTai: '測試2',
    },
    {
      good_Number: '測試2',
      good_Name: '測試2',
      good_ZhuangTai: '測試2',
      good_KuChun: '測試2',
      good_ZhuangTai: '測試2',
    },
    {
      good_Number: '測試2',
      good_Name: '測試2',
      good_ZhuangTai: '測試2',
      good_KuChun: '測試2',
      good_ZhuangTai: '測試2',
    },
    {
      good_Number: '測試2',
      good_Name: '測試2',
      good_ZhuangTai: '測試2',
      good_KuChun: '測試2',
      good_ZhuangTai: '測試2',
    },
    {
      good_Number: '測試2',
      good_Name: '測試2',
      good_ZhuangTai: '測試2',
      good_KuChun: '測試2',
      good_ZhuangTai: '測試2',
    },
  ],
  dataSelect: [],
  tableData: '',
  page: 1,
  isType: true,
  isType2: false,
  isType3: false,
})

//点击翻页
const clickPage = (num) => {
  data.page = num
}
//分页显示多少数据
const tablePage = computed(() => {
  let nowPage = (data.page - 1) * 5
  return data.data.slice(nowPage, nowPage + 5)
})
//最大页码
const pageMax = computed(() => {
  return Math.ceil(data.data.length / 5)
})
//跳转至某页
const ent = (page) => {
  data.page = page
}
</script>

<style lang="less" scoped>
.body {
  font-size: 10px;
  padding: 1rem;
  background: #fff;
}

#style1 {
  background: #fff;
  color: #000;
}

#style2 {
  background: #333333;
  color: #c9c3bc;
}

.nav {
  background: #333333;
  color: #c9c3bc;
  font-size: 0.8rem;
  padding: 0 1rem;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;

  .show {
    padding: 0;
    display: flex;
    list-style: none;
    align-items: center;
    flex-direction: row;
    height: 2.5rem;
    line-height: 2.5rem;

    div {
      height: 100%;
      padding: 0 2rem;
      cursor: pointer;
    }
  }

  .el-button {
    border-radius: 2px;
    padding: 0 2rem;
    background: #f38108;
  }

  .el-button:hover {
    background: #f7b56e;
  }
}

.select {
  margin-top: 1rem;
  border: 1px solid #e4e4e4;

  .sele {
    background: #f2f2f2;
    font-size: 0.8rem;
    line-height: 3rem;
    padding-left: 2rem;
    height: 3rem;
  }

  #def {
    margin: 0;
    padding: 0 2rem;
    align-items: center;
    height: 4rem;
    line-height: 4rem;

    label {
      padding: 0 2rem;
    }

    button {
      width: 5rem;
    }
  }
}

.table {
  .el-pagination {
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .page {
    margin-top: 1rem;
    display: flex;
    flex-direction: row;
    justify-content: space-evenly;
    align-items: center;
    align-content: center;

    span {
      color: red;
    }

    .ent {
      margin: 0 1rem;
      width: 0.9rem;
      height: 0.9rem;
      padding: 0.5rem;
      border: 1px solid #e3e3e3;
      border-radius: 2px;
    }
  }
}
</style>